<template>
  <div class="app-container">
    <el-button type="primary" @click="toggleDialog(null,staticDialogName1)" class="opt-btn" v-if="roleCheck('add-level')">新增群组</el-button>
    <el-table border :data="tableData.list" v-loading="loading" element-loading-text="加载中..." >
      <el-table-column label="黑名单群组" prop="levelName" align="center">
      </el-table-column>
      <el-table-column label="最后修改人"  prop="lastUpdater" align="center"  >
      </el-table-column>
      <el-table-column label="最后修改时间"  prop="lastUpdateTime" align="center" >
        <template slot-scope="{row}">
          {{row.lastUpdateTime | toTime('YYYY-MM-DD HH:mm:ss')}}
        </template>
      </el-table-column>
      <el-table-column label="备注"  prop="remark" align="center" >
      </el-table-column>
       <el-table-column label="操作"  align="center"  fixed="right" >
         <template slot-scope="{row}">
           <el-button type="text" @click="todelete(row)" v-if="roleCheck('delete-level')">删除</el-button>
           <el-button type="text" @click="toggleDialog(row,staticDialogName2)" v-if="roleCheck('level-setting')">基础设置</el-button>
          <el-button type="text" @click="toggleDialog(row,staticDialogName3)" v-if="roleCheck('level-jurisdiction-setting')">权限设置</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="Number(tableData.total)">
      </el-pagination>
    </div>
    <!--  新增群组弹窗  -->
    <AddLevalDialog
      v-if="addLevelDialogVisible"
      :dialogVisible="addLevelDialogVisible"
      :row-data="dialogProps"
      @cancel="addLevelDialogVisible = false"
    />

    <!--  基础设置弹窗  -->
    <BasicSettingsDialog
      :dialogVisible="basicSettingsDialogVisible"
      v-if="basicSettingsDialogVisible"
      :row-data="dialogProps"
      @cancel="basicSettingsDialogVisible = false"
    />

    <!--  权限设置弹窗  -->
    <PermisionSettingsDialog
      :dialogVisible="permisionSettingsDialogVisible"
      v-if="permisionSettingsDialogVisible"
      :row-data="dialogProps"
      @cancel="permisionSettingsDialogVisible = false"
    />
  </div>
</template>
<script>
import { grid, dialog } from '@/build';
import AddLevalDialog from './dialog/addlevel.vue';
import BasicSettingsDialog from './dialog/basicSettings';
import PermisionSettingsDialog from './dialog/permisionSettings';
import { getBlackListLeval, blackListLevalDelete } from '@/services/api/risk';
import { messageType } from '@/const/enum';

export default {
  name: 'set-leval',
  mixins: [grid, dialog],
  components: {
    AddLevalDialog,
    BasicSettingsDialog,
    PermisionSettingsDialog,
  },
  data() {
    return {
      addLevelDialogVisible: false, // 是否显示新增等级弹框
      basicSettingsDialogVisible: false, // 是否显示基础弹窗
      permisionSettingsDialogVisible: false, // 是否显示权限弹窗
      staticDialogName1: 'addLevelDialog',
      staticDialogName2: 'basicSettingsDialog',
      staticDialogName3: 'permisionSettingsDialog',
      dialogData: undefined,
      tableData: {
        list: [],
        total: 0,
      },
      filters: {
        page: 1,
        size: 20,
      },
    };
  },

  methods: {
    toggleDialog(row, dialogName) {
      this[`${dialogName}Visible`] = true;
      this.openDialog({ props: row, dialogName });
    },
    async todelete(data) {
      try {
        await this.$confirm('是否删除该黑名单群组?', '删除黑名单群组', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        });
        const [status, result] = await blackListLevalDelete({
          levelId: data.id,
        });
        if (!status) throw new Error(result.message);
        this.$message({
          type: 'success',
          message: '删除成功!', // 存在该等级的黑名单记录，无法删除！
        });
        this.getAll();
      } catch (e) {
        if (e === messageType.cancel) return;
        this.$message({
          type: 'error',
          message: `删除失败!${e.message || ''}`,
        });
      }
    },
  },
  mounted() {
    this.bindGet(getBlackListLeval, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
      format: (data) => {
        data.list = data.list.filter(val => val.id != 1);
        return data;
      },
    });
    this.getAll();
  },
};
</script>
<style lang="scss" scoped>
// .mgtop{margin-top:30px}
  // .app-container {
  //   .opt-btn {
  //     margin-bottom: 10px;
  //   }
  // }
</style>
